<template>
  <div>
    <h2>reactive:{{ m1 }}</h2>
    <h2>shallowReactive:{{ m2 }}</h2>
    <h3>ref:{{ m3 }}</h3>
    <h3>shallowRef:{{ m4 }}</h3>
    <button @click="change">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowReactive, shallowRef } from 'vue';

const m1 = reactive({
  name: '李唯一',
  car: {
    name: '骆驼橐驼'
  }
})

const m2 = shallowReactive({
  name: '张若尘',
  car: {
    name: '七彩混沌空间虫--小七'
  }
})

const m3 = ref({
  name: '阎无神',
  car: {
    name: '青龙'
  }
})
const m4 = shallowRef({
  name: '纪梵心',
  car: {
    name: '天道笛'
  }
})
const change = () => {
  // reactive ------深度响应式 
  // m1.name = '左丘红婷'
  // m1.car.name = '飞天big'

  // shallowReactive------浅度响应式
  // m2.name = '池瑶'
  // 直接更改深层数据会失效 要先改第一层 否则不生效
  // m2.car.name = '藏金白虎'

  // m3.value.car.name = 'shan字青龙'
  // shallowRef -----怎么改都改不了
  m4.value.name = '白卿儿'
  m4.value.car.name = '地魔雀'

}
</script>

<style scoped></style>